Fade Out Message
Description
The Fade Out Message action displays a message on the screen for a short period of time. The message fades away after a specified duration.
Used with the Grid and UX component
Javascript
{grid.object}.fadeOutMessage('','Sample message',2000,true);Fade Out Message
- Message text
Specify the message. The message text must be in the form of a Javascript expression, which means that text must be enclosed in single quotes. For example: 'You are now logged on'. This example shows a message that contains a variable: 'Your user name is:' +userName. You can call a Javascript function to define the message text. For example, specify this as the message text: myJsFunction().
- Message duration
Specify how long the message should be displayed before it disappears. Enter duration in milliseconds. E.g. 2000 is 2 seconds.
- Place message where
Specify whether the message should be placed in a div or in a placeholder control.
- Div id
Specify the ID of a DIV on the page where the fade out messages should be shown.
- Placeholder id
Specify the ID of the placholder control where the fade out message should be shown.
- Message style
If you select 'Default', the message style is based on the current component style (e.g. 'GrOlive', etc.) and the message is styled using CSS classes in the current style. If you select 'None' you can style the message yourself.
Create a Simple Fade Out Message
In the UX Builder on the 'UX Controls' page, open the 'Other Controls' menu. Click on the [Static Text] option to add a static text control to the component.
Highlight the control in the controls tree. In the properties list on the right set the 'Static text' control to read the following:
<div id='mydiv'></div>
In the 'Other Controls' menu click on the [Button] option to add a button to the component.
Highlight the button. In the properties list in the 'Javascript - (Touch, Mouse, Pointer Events)' section click the [...] button next to the 'click' property.
Select the 'Action Javascript' radio button on the Edit Click Event dialog. Click the 'Add New Action' button.
Type 'fade' into the Filter list control, highlight the 'Fade Out Message' action in the actions list, and click OK.
In the action definition set the 'Place message where' property to 'DIV'.
Set the 'Div id' property to 'mydiv'. This is the div you defined as the id for the Static Text control.
Click OK and Save and run in Live Preview. When you click on the button you should see a message appear and fade out.
Create a Fade Out Message Tied to a Javascript Function
In the UX Builder on the UX Controls page open the 'Other Controls' menu and click on the [Static Text] option to add a static text control to the component.
Highlight the control. In the properties list set the 'Static text' property to be the following:
<div id='mydiv'></div>
Open the 'Data Controls' menu and click on the [TextBox] option to add a textbox control to the component. Leave the name as textbox1.
Open the 'Other Controls' menu again and click on the [Button] option to add a button control to the bottom of the controls tree.
Highlight the button control. In the properties list scroll down to the 'Javascript - (Touch, Mouse, Pointer Events)' section and click the [...] button next to the 'click' property.
In the 'Edit Click Event' dialog select the 'Action Javascript' radio button and click the 'Add New Action' button.
Type 'fade' into the Filter list, highlight the 'Fade Out Message' action, and click OK.
In the Fade Out Message action's properties list click the [...] button next to the 'Message text' property.
Make the message text call the following Javascript function and click OK:
myMessage()
Set the 'Place message where' property to be 'DIV'.
Set the 'Div id' property to be 'mydiv'. Click OK and Save.
In the 'Code' section of the UX Builders menu open the 'Javascript functions' page. Define the myMessage function:
function myMessage(){ var data = {dialog.object}.getValue('textbox1'); return 'Hello' + ' ' + data; }
Run the component in Live Preview. Type something into the textbox and click the button tied to the fade out message action. The Fade Out Message should show the string returned by the Javascript function.
Videos
Overview of the Fade Out Message Action Javascript
Fade out messages are typically used to display confirmations after an action is performed. For example, when a user saves a record, a fade out message can be shown with the text "Your changes were saved". This video explains how to configure a fade out message using the Fade Out Message Action Javascript.
See Also